<template>
    <view>
        <!--
此文件为开发者工具生成，生成时间: 2023/11/15下午2:27:35
使用方法：
在 D:\公司文件\miniprogram.video.com-master-be19431b2ceb70d2a95f7b16006f1915ab6ac790\fanguo-theater\pages\list\list.wxml 引入模板

```
<import src="list.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />
```

在 D:\公司文件\miniprogram.video.com-master-be19431b2ceb70d2a95f7b16006f1915ab6ac790\fanguo-theater\pages\list\list.wxss 中引入样式
```
@import "./list.skeleton.wxss";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
-->
        <template name="skeleton">
            <view class="sk-container">
                <view class="topbox">
                    <view is="colorui/components/cu-custom">
                        <view class="cu-custom custom--cu-custom" style="height: 68px">
                            <view class="cu-bar custom--cu-bar fixed custom--fixed" style="height: 68px; padding-top: 20px">
                                <view class="action custom--action">
                                    <view>
                                        <image mode="widthFix" style="width: 142px; height: 34.2759px" class="sk-image"></image>
                                    </view>
                                </view>
                                <view class="content custom--content" style="top: 20px">
                                    <view class="sk-transparent sk-text-23-4375-404 sk-text" style="background-position-x: 50%">小剧场</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="flex align-center justify-between margin-top">
                    <view class="phitem" data-page="0">
                        <image mode="widthFix" style="height: 37px" class="sk-image"></image>
                        <text class="sk-transparent sk-text-14-2857-22 sk-text" style="background-position-x: 50%">排行</text>
                    </view>
                    <view class="phitem" data-page="1">
                        <image mode="widthFix" style="height: 37px" class="sk-image"></image>
                        <text class="sk-transparent sk-text-14-2857-73 sk-text" style="background-position-x: 50%">热门</text>
                    </view>
                    <view class="phitem" data-page="2">
                        <image mode="widthFix" style="height: 37px" class="sk-image"></image>
                        <text class="sk-transparent sk-text-14-2857-486 sk-text" style="background-position-x: 50%">最新</text>
                    </view>
                </view>
                <view class="flex align-center flex-wrap margin-lr-sm justify-between margin-top">
                    <view class="listitem" data-id="21">
                        <view class="listimage">
                            <image mode="widthFix" style="height: 334.333px" class="sk-image"></image>
                        </view>
                        <view class="listbot padding-lr-xs flex align-center">
                            <text class="margin-left-xs text-black sk-transparent sk-text-14-2857-601 sk-text">被职场压迫后我与首富姐姐重逢了</text>
                        </view>
                    </view>
                    <view class="listitem" data-id="19">
                        <view class="listimage">
                            <image mode="widthFix" style="height: 334.333px" class="sk-image"></image>
                        </view>
                        <view class="listbot padding-lr-xs flex align-center">
                            <text class="margin-left-xs text-black sk-transparent sk-text-14-2857-708 sk-text">父与子</text>
                        </view>
                    </view>
                </view>
                <view is="components/Bar">
                    <view class="Bar--barbox">
                        <view class="Bar--baritem Bar--on sk-transparent sk-text-14-2857-69 sk-text" data-index="2">小剧场</view>
                        <view class="Bar--baritem sk-transparent sk-text-14-2857-829 sk-text" data-index="0">追剧</view>
                        <view class="Bar--baritem sk-transparent sk-text-14-2857-253 sk-text" data-index="4">我的</view>
                    </view>
                </view>
            </view>
        </template>
    </view>
</template>

<style>
/*
此文件为开发者工具生成，生成时间: 2023/11/15下午2:27:35

在 D:\公司文件\miniprogram.video.com-master-be19431b2ceb70d2a95f7b16006f1915ab6ac790\fanguo-theater\pages\list\list.wxss 中引入样式
```
@import "./list.skeleton.css";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
*/
.sk-transparent {
    color: transparent !important;
}
.sk-text-23-4375-404 {
    background-image: linear-gradient(transparent 23.4375%, #eeeeee 0%, #eeeeee 76.5625%, transparent 0%) !important;
    background-size: 100% 58.3942rpx;
    position: relative !important;
}
.sk-text {
    background-origin: content-box !important;
    background-clip: content-box !important;
    background-color: transparent !important;
    color: transparent !important;
    background-repeat: repeat-y !important;
}
.sk-text-14-2857-22 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.2117rpx;
    position: relative !important;
}
.sk-text-14-2857-73 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.2117rpx;
    position: relative !important;
}
.sk-text-14-2857-486 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.2117rpx;
    position: relative !important;
}
.sk-text-14-2857-601 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 38.3212rpx;
    position: relative !important;
}
.sk-text-14-2857-708 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 38.3212rpx;
    position: relative !important;
}
.sk-text-14-2857-69 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 40.8759rpx;
    position: relative !important;
}
.sk-text-14-2857-829 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 40.8759rpx;
    position: relative !important;
}
.sk-text-14-2857-253 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 40.8759rpx;
    position: relative !important;
}
.sk-image {
    background: #efefef !important;
}
.sk-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
}
</style>
